﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">


<!--TO READ THIS HELP FILE, RIGHT-CLICK ON THE FILE NAME IN THE
    SOLUTION EXPLORER WINDOW AND SELECT "VIEW IN BROWSER"-->


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
<title>WebBrowser Starter Kit</title>
<style>
<!--
BODY         { background: url('Images/top-vc.gif') repeat-x; font-family: Verdana; font-size: 67% }
.maindiv     { background: url('Images/side-vc.gif') repeat-y; padding-left: 55px; padding-top: 5px; position: relative; height: 50px }
P            { margin-top: 0; margin-bottom: 6px; line-height:130% }
H1           { margin-top: 20px; margin-bottom: 12px; font-size:190% }
H2           { color: #585F56; left: -55px; position: relative; margin-top: 21px; margin-bottom: 9px; font-size:170% }
H3           { margin-top: 21px; margin-bottom: 9px; font-size: 140%;  font-weight: bold}
H4           { margin-top: 18px; margin-bottom: 9px; font-size: 140%; font-weight: bold}
OL           { margin-top: 0; margin-bottom: 9px; line-height:130%}
UL           { margin-top: 0; margin-bottom: 9px; line-height:130%}
LI           { margin-top: 0; margin-bottom: 6px }
BLOCKQUOTE   { margin-left: 20px }
TABLE        { padding: 4px; BACKGROUND: #f8f7ef; BORDER: #DDDCD6 1px solid; BORDER-COLLAPSE: collapse; margin-bottom: 9px; }
TR           { vertical-align: top} 
TD           { padding: 4px; font-family: Verdana; font-size: 67%; line-height: 130%} 
.contents    { line-height: 150% }
DIV.CodeBlock   { font-family: "Courier New"; font-size: 100%; margin-bottom: 6px; BACKGROUND: #f8f7ef; BORDER: #eeede6 1px solid; padding: 10px; }
.CodeInline  { font-family: "Courier New" }
.ProcedureLabel {margin-top: 12px; font-style: italic; font-weight: bold; color: #0D4CC3 } 
.FileNameCol { padding: 6px; BACKGROUND: #eeede6; width=220px; font-weight: bold}
-->
</style>
</head>

<body topmargin="0" leftmargin="0" rightmargin="20">
<div class="maindiv">

<a name="top">

<!-- MAIN CONTENT BEGINS -->

</a>

<p><a name="top">Microsoft Windows Mobile Starter Kit </a> </p>
<h1>Windows Mobile <a name="top">Starter Kit: A MobileBrowser for the 
Windows Mobile 5.0 Pocket PC</a></h1>
<p class="contents"><font color="#003300"><b><a name="top">Contents:</a></b></font></p>
<p class="contents"><font color="#003300">
<a href="#Introduction">Introduction</a><br>
<a href="#Goals">Goals</a><br>
<a href="#GettingStarted">Getting Started</a><br>
<a href="#HowItWorks">How the Web Browser Works</a><br>
<a href="#Concepts">Concepts</a><br>
<a href="#Extending">Extending the MobileBrowser</a><br>
<a href="#ForMoreInformation">For More Information</a><br>
</font></p>

<h2><A href="#top"><IMG src="Images\topjump-vc.gif" border=0></A><a name="Introduction">Introduction</a></h2>
	<p>
	<img border="0" src="Images/webbrowser_thumbnail.jpg" width="441" height="282" alt="Screen Saver" align="right" style="margin-left: 15px; margin-bottom: 10px"
>
<p>This Microsoft Windows Mobile Starter Kit is a ready-to-run Web browser 
application that provides 
&quot;tabs&quot; that allow the user to have multiple Web pages open at the same 
time, 
and to move freely from one to another. The Starter Kit comes ready to compile and run. 
You can 
customize it with only a little extra C# programming. You can also use the 
Starter Kit source code as the basis for your own projects that you can share with others, or upload to the Internet.</p>

<br>
<p>

	<b>Note:</b> This documentation assumes that you have a basic knowledge of programming
 concepts and the Microsoft Windows Mobile / Microsoft Visual C# development environment. You must be using 
	Microsoft Visual Studio 2005, and have the Microsoft Windows Mobile 5.0 SDK for Pocket PC 
	installed. You can learn more 
	about these topics by reading the 
	<a href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/mobilesdk5/html/mob5oriWelcomeToWindowsMobile.asp?frame=true">Windows 
	Mobile SDK Documentation on MSDN</a>. For information on using Visual C# 
	2005, see the
	<a href="http://msdn.microsoft.com/vcsharp/programming/default.aspx">MSDN 
	Visual C# Reference</a>.</p>
<p>

	For more information or to leave feedback on this Starter Kit, please visit 
the 
<a href="http://channel9.msdn.com/wiki/default.aspx/MobileDeveloper.TabbedWebBrowser">Windows Mobile Developer Wiki 
page</a>.

</p>

<h2><A href="#top"><IMG src="Images\topjump-vc.gif" border=0></A><a name="Goals">Goals</a></h2>
	<p class="MsoNormal">

	This Starter Kit demonstrates the following technologies:
</p>
<ul>

	<li>Using the WebBrowser and TabControl</li>
	<li>Accessing Favorites</li>
	<li>Supporting Screen Rotation by Docking controls</li>
	</ul>
				
			

<p class="MsoNormal">

	After reading this Starter Kit documentation you will understand the 
	following concepts:</p>
<ul>
	<li>
	<p class="MsoNormal">How to install and configure the 
	MobileBrowser application</p></li>
	<li>
	<p class="MsoNormal">How the source code is organized</p></li>
	<li>
	<p class="MsoNormal">How the MobileBrowser application works</p></li>
	<li>
	<p class="MsoNormal">How you can customize it using Visual C# </p></li>
</ul>
				
			

<h2><A href="#top"><IMG src="Images\topjump-vc.gif" border=0></A><a name="GettingStarted">Getting Started</a></h2>

<h3>Building and Running the MobileBrowser Application</h3>

<p>Once your project is loaded into the Visual Studio 2005 environment, you can 
compile and run the program in one step. </p>

<p class="ProcedureLabel">To build and run the MobileBrowser application using the 
Pocket PC Emulator</p>

<ul>
	<li>
		Select &quot;Windows Mobile 5.0 Pocket PC Emulator&quot; in the target device 
		window in the top left of the Visual Studio environment.</li>
	<li>
		Press F5 to build, deploy and launch the application on 
		the Emulator.
	</li>
</ul>

<p class="ProcedureLabel">To build and run the Web browser application using a 
real Pocket PC</p>

<ul>
	<li>
		Connect the Pocket PC to the computer using ActiveSync.</li>
	<li>
		Select &quot;Windows Mobile 5.0 Pocket PC Device&quot; in the target device window 
		in the top left of the Visual Studio environment.</li>
	<li>Press F5 to build, deploy and launch the application on 
	the Pocket PC. </li>
</ul>
<p>By default, the Web browser opens a single web page containing a list of 
links to previously saved favorites. To open a new page, click on the empty tab. Each new 
page created will display the current favorites as stored by Internet 
Explorer mobile, and a selection of favorites stored in the application. The 
menu options allow the current tab to be closed, or a URL to be entered 
manually. </p>
<p>To stop the application, click on the Stop Debugging button on the left of 
the Visual Studio environment.</p>
	
<h3>Making a Quick Change to the Source Code</h3>

<p>Editing the source code in order to change the way the application works is easy. 
The following example adds some favorites to the default Web page.</p>

<p class="ProcedureLabel">To display an extra line of text</p>

<ol>
	<li>Find the <b>Solution Explorer</b> window; its default position is in the upper right corner
	of the Visual C# environment. Right-click <b>BrowserForm.cs</b> in the <b>Solution Explorer</b> window and 
	select <b>View Code</b> to open <b>BrowserForm.cs</b> in Code view.</li>
	<li>Scroll through the source code until you see the <b>CreateDocument</b> 
	method, or select it from the drop-down list in the upper right of Code 
	View.</li>
	<li><p>Type the following code before the link to mobile.msn.com:</p>
	<div class="CodeBlock"><font SIZE="2">doc.Append(</font><font SIZE="2" COLOR="#800000">&quot;&lt;li&gt;&lt;a 
		href = \&quot;Http://search.msn.com\&quot;&gt;MSN Search&lt;/a&gt;&lt;/li&gt;&quot;</font><font SIZE="2">);</font></div></li>
	<li><p>Press <b>F5</b> to run the application again.</p>
	</li>
</ol>

<p>The new link will now be displayed on the default Web page.</p>

<h2><A href="#top"><IMG src="Images\topjump-vc.gif" border=0></A><a name="HowItWorks">How 
the MobileBrowser Works </a></h2>

<p>The Microsoft .NET Compact Framework provides a control called <b>WebBrowser</b>, which 
encapsulates all the major features of Internet Explorer Mobile. By creating 
multiple instances of the <b>WebBrowser</b> control, it is possible to have 
multiple web browser sessions open simultaneously. To allow the user to 
quickly switch between open <b>WebBrowser</b> controls, the application uses a <b>
TabControl</b>. Each Tab is associated with a <b>WebBrowser</b>, and an extra 
empty tab is used as a shortcut to open a new <b>WebBrowser</b> control.<br>
<br>
By default, every new <b>WebBrowser</b> control opens a new web page. This web 
page is created programmatically when the program starts running, and consists 
of some pre-programmed links as well as the list of current favorite websites. The 
favorites are read from the directory returned by the <b>
System.Environment.SpecialFolder.Favorites</b> property.</p>

<h3>Web Browser Project Files</h3>

<p>The project contains three different C# source-code files.</p>

<table border="1" bordercolor= #DDDCD6 width="100%" style="border-collapse: collapse">
	<tr>
		<td class="FileNameCol">Program.cs</td>
		<td>Contains the <b>Main()</b> method — the location where the program 
		begins execution — and the code for handling the command line switches</td>
	</tr>
	<tr>
		<td class="FileNameCol">BrowserForm.cs</td>
		<td>Contains the Windows Form that displays the <b>TabControl</b>, <b>
		WebBrowser</b> and menu controls.</td>
	</tr>
	<tr>
		<td class="FileNameCol">EnterAURLForm.cs</td>
		<td>Contains the Windows Form that allows the user to manually enter a 
		URL.</td>
	</tr>
	</table>


<h2><A href="#top"><IMG src="Images\topjump-vc.gif" border=0></A><a name="Concepts">Concepts</a></h2>

<h3>Using the WebBrowser Control</h3>

<p>All the hard work in this application is performed by the <b>WebBrowser</b> 
control. The following methods, properties and event are used:</p>

<table border="1" bordercolor= #DDDCD6 width="100%" style="border-collapse: collapse" id="table1">
	<tr>
		<td class="FileNameCol" width="253">Hide / Show</td>
		<td>These properties make the <b>WebBrowser</b> control invisible, or visible. This is 
		how the application keeps multiple browsers open, but only one visible at a time.</td>
	</tr>
	<tr>
		<td class="FileNameCol" width="253">Top / Left / Width / Height</td>
		<td>When the screen is resized or rotated, the physical dimensions of 
		the <b>WebBrowser</b> control are changed to keep it as large as 
		possible within the current screen.</td>
	</tr>
	<tr>
		<td class="FileNameCol" width="253">Navigate</td>
		<td>This method causes the <b>WebBrowser</b> to visit the provided 
		website address, and display its contents.</td>
	</tr>
	<tr>
		<td class="FileNameCol" width="253">CanGoBack</td>
		<td>This property is used by the application to determine if the <b>
		WebBrowser</b> control can navigate back to a previous page.</td>
	</tr>
	<tr>
		<td class="FileNameCol" width="253">GoBack</td>
		<td>This method causes the <b>WebBrowser</b> to redisplay the previous 
		page.</td>
	</tr>
	<tr>
		<td class="FileNameCol" width="253">DocumentCompleted</td>
		<td>This event is generated when the <b>WebBrowser</b> has finished 
		loaded and displaying a web page. When the application receives this 
		event, it can then obtain the name of the web page, and assign that to 
		the <b>TabControl</b> tab to aid the user.</td>
	</tr>
	</table>


<h3>Supporting Screen Rotation</h3>

<p>Windows Mobile 5.0-based Pocket PC devices support screen rotation between 
landscape and portrait modes, and it is important that your application knows how 
to deal with this sudden change of screen layout. Every Windows Form can support 
a <b>Resize</b> event, which is added from the <b>Properties</b> window like any other 
Window Form 
method. The method that handles this event will be called whenever the Windows 
Form is changed in size or orientation. </p>
<p>However, in this application we avoid having to worry about screen rotation 
because we use the &quot;docking&quot; feature provided by the .Net Compact Framework. 
By setting the Dock property of the <b>TabControl</b> to Bottom, the <b>
TabControl</b> will also remain attached to the bottom of the screen, even when 
rotated. Similarly, the<b> Dock</b> properties of all the&nbsp; <b>WebBrowser </b>
controls&nbsp; are 
set to <b>Fill</b>, so they are always full-sized. Here is the code that sets 
this property.</p>
<p>&nbsp;</p>
	<div class="CodeBlock"><font SIZE="2">webPage.Dock = </font>
		<font SIZE="2" COLOR="#008080">DockStyle</font><font SIZE="2">.Fill;</font></div>
<p>&nbsp;</p>
<p>When designing applications for Pocket PCs, it is best to not assume any 
particular screen size or orientation. Do not &quot;hard code&quot; window sizes into your 
application if at all possible. For example, a growing number of Pocket PC 
devices have square screens of 240 by 240 pixels. If your application assumes a 
rectangular display of 320 by 240 pixels, your program may not support as many 
devices as you may like.</p>
<h3>Using StringBuilder to aid Performance</h3>
<p>In C#, strings are immutable. This means that the string variables themselves 
cannot be changed. Every time a string has another string added to it, 
the entire string is recreated. Adding many strings together, this can lead 
to a loss of performance. When performing string operations, you should therefore use the <b>StringBuilder</b> class. Objects that are declared of type
<b>StringBuilder</b> have methods for appending substrings, and this helps your 
application run faster. This is why in the <b>CreateDocument</b> method, a <b>
StringBuilder</b> object is used to construct the HTML page rather than simply 
adding string variables together, as shown below:</p>
<p>&nbsp;</p>
	<div class="CodeBlock"><font SIZE="2"></font><font SIZE="2" COLOR="#008080">
		StringBuilder</font><font SIZE="2"> htmldoc = </font>
		<font SIZE="2" COLOR="#0000ff">new</font><font SIZE="2"> </font>
		<font SIZE="2" COLOR="#008080">StringBuilder</font><font SIZE="2">();<p>
		htmldoc.Append(</font><font SIZE="2" COLOR="#800000">&quot;&lt;html&gt;&quot;</font><font SIZE="2">);</p>
		<p>htmldoc.Append(</font><font SIZE="2" COLOR="#800000">&quot;&lt;title&gt;Browser&lt;/title&gt;&quot;</font><font SIZE="2">);</p>
		<p>htmldoc.Append(</font><font SIZE="2" COLOR="#800000">&quot;&lt;body bgcolor=\&quot;#DDEEFF\&quot;&gt;&quot;</font><font SIZE="2">);</p>
		<p>htmldoc.Append(</font><font SIZE="2" COLOR="#800000">&quot;&lt;h2&gt;Favorite 
		Websites&lt;/h2&gt;&lt;hr&gt;&quot;</font><font SIZE="2">);</font></div>
<p>&nbsp;</p>

<h2><A href="#top"><IMG src="Images\topjump-vc.gif" border=0></A><a name="Extending">Extending 
the MobileBrowser</a></h2>

<h3>Emailing a URL</h3>

<p>A useful feature to add to your Beb browser application is the ability to email the URL 
of the current web page to a contact. </p>

<p class="ProcedureLabel">To add code that will email a URL:</p>

<ol>
	<li>In <b>Solution Explorer</b>, right-click <b>BrowserForm.cs</b> and select
		<b>View Designer</b>.
	</li>
	<li>Click on the MobileBrowser Form&#39;s right-hand menu, entitled <b>Menu</b>, and 
	add a new option called &quot;Email current URL&quot;.</li>
	<li>Double-click the new menu option, and you&#39;ll see the Code view window. A method for 
	handling the new menu option will have been created. 
	</li>
	<li>Add the following code to the body of the new method:<div class="CodeBlock">
		<font SIZE="2"><font SIZE="2" COLOR="#0000ff">private</font>
		<font SIZE="2" COLOR="#0000ff">void</font> 
		menuItem_EmailcurrentURL_Click(<font SIZE="2" COLOR="#0000ff">object</font> 
		sender, <font SIZE="2" COLOR="#008080">EventArgs</font> e)<p>{</p>
		<font SIZE="2" COLOR="#008000">
		<p>&nbsp;&nbsp;&nbsp; // Add the ability to Mail a URL to a contact</p>
		</font>
		<p></font><font SIZE="2" COLOR="#008000">&nbsp;&nbsp;&nbsp; // First, 
		select a contact</p>
		</font><font SIZE="2">
		<p>&nbsp;&nbsp;&nbsp; Microsoft.WindowsMobile.PocketOutlook.</font><font SIZE="2" COLOR="#008080">Contact</font><font SIZE="2"> 
		myContact;</p>
		<p></font><font SIZE="2" COLOR="#008080">&nbsp;&nbsp;&nbsp; 
		ChooseContactDialog</font><font SIZE="2"> myContactPicker = </font>
		<font SIZE="2" COLOR="#0000ff">new</font><font SIZE="2"> </font>
		<font SIZE="2" COLOR="#008080">ChooseContactDialog</font><font SIZE="2">();</p>
		<p></font><font SIZE="2" COLOR="#0000ff">&nbsp;&nbsp;&nbsp; if</font><font SIZE="2"> 
		(myContactPicker.ShowDialog() == </font><font SIZE="2" COLOR="#008080">
		DialogResult</font><font SIZE="2">.OK)</p>
		<p>&nbsp;&nbsp;&nbsp; {</p>
		<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; myContact = 
		myContactPicker.SelectedContact;</p>
		<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; myContactPicker.Dispose();</p>
		<p>&nbsp;&nbsp;&nbsp; }</p>
		<p></font><font SIZE="2" COLOR="#0000ff">&nbsp;&nbsp;&nbsp; else</p>
		</font><font SIZE="2">
		<p>&nbsp;&nbsp;&nbsp; {</p>
		<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; myContactPicker.Dispose();</p>
		<p></font><font SIZE="2" COLOR="#0000ff">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
		return</font><font SIZE="2">;</p>
		<p>&nbsp;&nbsp;&nbsp; }</p>
		<p>&nbsp;&nbsp;&nbsp; </font><font SIZE="2" COLOR="#008000">// Second, 
		create the email</p>
		</font><font SIZE="2">
		<p></font><font SIZE="2" COLOR="#0000ff">&nbsp;&nbsp;&nbsp; string</font><font SIZE="2"> 
		mail_account = </font><font SIZE="2" COLOR="#800000">&quot;ActiveSync&quot;</font><font SIZE="2">;</p>
		<p></font><font SIZE="2" COLOR="#0000ff">&nbsp;&nbsp;&nbsp; string</font><font SIZE="2"> 
		mail_to = myContact.Email1Address;</p>
		<p></font><font SIZE="2" COLOR="#0000ff">&nbsp;&nbsp;&nbsp; string</font><font SIZE="2"> 
		mail_subject = </font><font SIZE="2" COLOR="#800000">&quot;Hello &quot;</font><font SIZE="2"> 
		+ myContact.FirstName.ToString();</p>
		<p></font><font SIZE="2" COLOR="#0000ff">&nbsp;&nbsp;&nbsp; string</font><font SIZE="2"> 
		mail_body = </font><font SIZE="2" COLOR="#800000">&quot;I thought you might 
		be interested in this web page: &quot;</font><font SIZE="2"> + 
		GetCurrentWebBrowser().Url.ToString();</p>
		<p>&nbsp;&nbsp;&nbsp; Microsoft.WindowsMobile.PocketOutlook.</font><font SIZE="2" COLOR="#008080">MessagingApplication</font><font SIZE="2">.DisplayComposeForm(mail_account, 
		mail_to, mail_subject, mail_body);</p>
		<p>}</font></div></li>
	<li>Save the file, and press <b>F5</b> to run the application.</li>
	<li>Use the new menu option to create an email containing the current web 
	page&#39;s URL addressed to a contact stored on your device.</li>
</ol>
<h3>More Suggestions</h3>

<p>The Tabbed web browser application is designed to be easily expanded and 
customized. Here are some ideas.</p>

<ul>
	<li><b><i>Add your own favorite websites<br>
	</i></b>If you do not want to overload Internet Explorer Mobile&#39;s collection of 
	favorites, add your favorites programmatically as demonstrated above.</li>
	<li><b><i>Save websites locally</i></b><i><br>
	</i>Save the HTML of web pages to the Pocket PC&#39;s file system&nbsp; to provide access to favorite websites even 
	when you are not online.</li>
	<li><i><b>Automatically download favorites</b><br>
	</i>Create a feature that will automatically open up a new web browser for 
	each favorite, and start downloading.</li>
	<li><i><b>Support Really Simple Syndication (RSS)</b><br>
	</i>This feature is a little more advanced, but why not add support for RSS feeds? The 
	Visual C# Express ScreenSaver Starter Kit contains sample code for dealing with RSS.</li>
</ul>


<h2><A href="#top"><IMG src="Images\topjump-vc.gif" border=0></A><a name="ForMoreInformation">For 
More Information</a></h2>

<h3>Online Resources</h3>

<ul>
	<li><a href="http://msdn.microsoft.com/vcsharp/programming/default.aspx">
	MSDN Visual C# Reference</a></li>
	<li>
	<a href="http://msdn.microsoft.com/library/default.asp?url=/library/en-us/mobilesdk5/html/mob5oriWelcomeToWindowsMobile.asp?frame=true">Windows 
	Mobile SDK Documentation on MSDN</a></li>
	<li>
	<a href="http://channel9.msdn.com/wiki/default.aspx/MobileDeveloper.StarterKits">Windows Mobile Starter Kits Wiki Page</a></li>
</ul>

<p>&nbsp;</p>

<p>
<a href="http://www.microsoft.com/info/cpyright.mspx">
© 2006 Microsoft Corporation</a>
</p>

<!-- DO NOT EDIT BELOW THIS LINE  -->
<p>&nbsp;</p>
</div>
</body>
</html>
